<template>
  <div class="data-analysis-index">
    <div class="page-header">
      <h2>数据分析</h2>
      <div class="header-actions">
        <el-button type="primary" @click="generateReport">
          <el-icon><Document /></el-icon>
          生成报告
        </el-button>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 数据概览 -->
    <div class="data-overview">
      <div class="overview-card">
        <div class="card-icon users">
          <el-icon><User /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ formatNumber(overview.totalUsers) }}</div>
          <div class="card-label">总用户数</div>
        </div>
        <div class="card-trend">
          <span class="trend-up">+{{ overview.userGrowth }}%</span>
          <span class="trend-label">本月增长</span>
        </div>
      </div>

      <div class="overview-card">
        <div class="card-icon detections">
          <el-icon><Search /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ formatNumber(overview.totalDetections) }}</div>
          <div class="card-label">总检测次数</div>
        </div>
        <div class="card-trend">
          <span class="trend-up">+{{ overview.detectionGrowth }}%</span>
          <span class="trend-label">本月增长</span>
        </div>
      </div>

      <div class="overview-card">
        <div class="card-icon accuracy">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ overview.avgAccuracy }}%</div>
          <div class="card-label">平均准确率</div>
        </div>
        <div class="card-trend">
          <span class="trend-up">+{{ overview.accuracyImprovement }}%</span>
          <span class="trend-label">较上月提升</span>
        </div>
      </div>

      <div class="overview-card">
        <div class="card-icon blocked">
          <el-icon><CircleClose /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-number">{{ formatNumber(overview.blockedThreats) }}</div>
          <div class="card-label">拦截威胁数</div>
        </div>
        <div class="card-trend">
          <span class="trend-up">+{{ overview.threatGrowth }}%</span>
          <span class="trend-label">本月增长</span>
        </div>
      </div>
    </div>

    <!-- 分析模块导航 -->
    <div class="analysis-modules">
      <h3>分析模块</h3>
      <div class="module-grid">
        <div class="module-card" @click="navigateTo('/admin/data-analysis/usage-statistics')">
          <div class="module-icon">
            <el-icon><PieChart /></el-icon>
          </div>
          <div class="module-content">
            <h4>使用统计分析</h4>
            <p>用户行为分析、功能使用情况和系统负载统计</p>
          </div>
          <div class="module-stats">
            <div class="stat-item">
              <span class="stat-label">日活跃用户</span>
              <span class="stat-value">{{ formatNumber(moduleStats.dailyActiveUsers) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">峰值QPS</span>
              <span class="stat-value">{{ moduleStats.peakQps }}</span>
            </div>
          </div>
        </div>

        <div class="module-card" @click="navigateTo('/admin/data-analysis/rumor-spread-analysis')">
          <div class="module-icon">
            <el-icon><Share /></el-icon>
          </div>
          <div class="module-content">
            <h4>谣言传播分析</h4>
            <p>谣言传播路径、影响范围和传播速度分析</p>
          </div>
          <div class="module-stats">
            <div class="stat-item">
              <span class="stat-label">监控谣言</span>
              <span class="stat-value">{{ moduleStats.monitoredRumors }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">传播速度</span>
              <span class="stat-value">{{ moduleStats.spreadSpeed }}/h</span>
            </div>
          </div>
        </div>

        <div class="module-card" @click="navigateTo('/admin/data-analysis/fraud-trend-analysis')">
          <div class="module-icon">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="module-content">
            <h4>诈骗趋势分析</h4>
            <p>诈骗类型变化、地域分布和时间趋势分析</p>
          </div>
          <div class="module-stats">
            <div class="stat-item">
              <span class="stat-label">新增诈骗</span>
              <span class="stat-value">{{ moduleStats.newFraudCases }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">风险等级</span>
              <span class="stat-value">{{ moduleStats.riskLevel }}</span>
            </div>
          </div>
        </div>

        <div class="module-card" @click="navigateTo('/admin/data-analysis/system-efficiency-report')">
          <div class="module-icon">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="module-content">
            <h4>系统效能报告</h4>
            <p>系统性能指标、资源使用情况和优化建议</p>
          </div>
          <div class="module-stats">
            <div class="stat-item">
              <span class="stat-label">系统得分</span>
              <span class="stat-value">{{ moduleStats.systemScore }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">响应时间</span>
              <span class="stat-value">{{ moduleStats.responseTime }}ms</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时数据图表 -->
    <div class="realtime-charts">
      <div class="chart-section">
        <h3>实时检测统计</h3>
        <div class="chart-container">
          <div ref="realtimeChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-section">
        <h3>威胁类型分布</h3>
        <div class="chart-container">
          <div ref="threatChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-section">
        <h3>地域分布热力图</h3>
        <div class="chart-container">
          <div ref="regionChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-section">
        <h3>模型性能趋势</h3>
        <div class="chart-container">
          <div ref="performanceChart" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 关键指标 -->
    <div class="key-metrics">
      <h3>关键指标</h3>
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-header">
            <span class="metric-title">检测成功率</span>
            <el-tag type="success" size="small">优秀</el-tag>
          </div>
          <div class="metric-value">{{ keyMetrics.detectionSuccessRate }}%</div>
          <div class="metric-chart">
            <el-progress 
              :percentage="keyMetrics.detectionSuccessRate" 
              :stroke-width="8"
              color="#67c23a"
            />
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-header">
            <span class="metric-title">平均响应时间</span>
            <el-tag type="warning" size="small">良好</el-tag>
          </div>
          <div class="metric-value">{{ keyMetrics.avgResponseTime }}ms</div>
          <div class="metric-chart">
            <el-progress 
              :percentage="Math.min(100, (1000 - keyMetrics.avgResponseTime) / 10)" 
              :stroke-width="8"
              color="#e6a23c"
            />
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-header">
            <span class="metric-title">用户满意度</span>
            <el-tag type="success" size="small">优秀</el-tag>
          </div>
          <div class="metric-value">{{ keyMetrics.userSatisfaction }}%</div>
          <div class="metric-chart">
            <el-progress 
              :percentage="keyMetrics.userSatisfaction" 
              :stroke-width="8"
              color="#67c23a"
            />
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-header">
            <span class="metric-title">系统稳定性</span>
            <el-tag type="success" size="small">优秀</el-tag>
          </div>
          <div class="metric-value">{{ keyMetrics.systemStability }}%</div>
          <div class="metric-chart">
            <el-progress 
              :percentage="keyMetrics.systemStability" 
              :stroke-width="8"
              color="#67c23a"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 近期趋势分析 -->
    <div class="trend-analysis">
      <h3>近期趋势分析</h3>
      <div class="trend-grid">
        <div class="trend-card">
          <div class="trend-header">
            <h4>检测量趋势</h4>
            <span class="trend-period">过去7天</span>
          </div>
          <div class="trend-content">
            <div class="trend-value">
              <span class="value-number">{{ formatNumber(trends.weeklyDetections) }}</span>
              <span class="value-change positive">+{{ trends.detectionChange }}%</span>
            </div>
            <div class="trend-description">
              检测量持续增长，用户活跃度提升
            </div>
          </div>
        </div>

        <div class="trend-card">
          <div class="trend-header">
            <h4>威胁拦截</h4>
            <span class="trend-period">过去7天</span>
          </div>
          <div class="trend-content">
            <div class="trend-value">
              <span class="value-number">{{ formatNumber(trends.weeklyThreats) }}</span>
              <span class="value-change negative">-{{ trends.threatChange }}%</span>
            </div>
            <div class="trend-description">
              威胁数量下降，系统防护效果显著
            </div>
          </div>
        </div>

        <div class="trend-card">
          <div class="trend-header">
            <h4>模型准确率</h4>
            <span class="trend-period">过去7天</span>
          </div>
          <div class="trend-content">
            <div class="trend-value">
              <span class="value-number">{{ trends.weeklyAccuracy }}%</span>
              <span class="value-change positive">+{{ trends.accuracyChange }}%</span>
            </div>
            <div class="trend-description">
              模型性能持续优化，准确率稳步提升
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 报告生成对话框 -->
    <el-dialog v-model="reportDialogVisible" title="生成分析报告" width="500px">
      <el-form :model="reportForm" :rules="reportRules" ref="reportFormRef" label-width="100px">
        <el-form-item label="报告类型" prop="type">
          <el-select v-model="reportForm.type" placeholder="请选择报告类型">
            <el-option label="综合分析报告" value="comprehensive" />
            <el-option label="用户行为报告" value="user-behavior" />
            <el-option label="系统性能报告" value="system-performance" />
            <el-option label="威胁分析报告" value="threat-analysis" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围" prop="dateRange">
          <el-date-picker
            v-model="reportForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="报告格式" prop="format">
          <el-radio-group v-model="reportForm.format">
            <el-radio label="pdf">PDF</el-radio>
            <el-radio label="excel">Excel</el-radio>
            <el-radio label="word">Word</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reportDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReport" :loading="reportGenerating">
            生成报告
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'
import {
  Document, Refresh, User, Search, TrendCharts, CircleClose,
  PieChart, Share, Warning, Monitor
} from '@element-plus/icons-vue'

const router = useRouter()

// 数据状态
const reportDialogVisible = ref(false)
const reportGenerating = ref(false)
const reportFormRef = ref(null)

// 图表引用
const realtimeChart = ref(null)
const threatChart = ref(null)
const regionChart = ref(null)
const performanceChart = ref(null)

// 图表实例
let realtimeChartInstance = null
let threatChartInstance = null
let regionChartInstance = null
let performanceChartInstance = null

// 数据概览
const overview = reactive({
  totalUsers: 128456,
  userGrowth: 12.5,
  totalDetections: 2856734,
  detectionGrowth: 8.3,
  avgAccuracy: 94.7,
  accuracyImprovement: 2.1,
  blockedThreats: 45678,
  threatGrowth: 15.2
})

// 模块统计
const moduleStats = reactive({
  dailyActiveUsers: 45678,
  peakQps: 1250,
  monitoredRumors: 234,
  spreadSpeed: 150,
  newFraudCases: 89,
  riskLevel: '中等',
  systemScore: 94,
  responseTime: 245
})

// 关键指标
const keyMetrics = reactive({
  detectionSuccessRate: 96.8,
  avgResponseTime: 245,
  userSatisfaction: 94.2,
  systemStability: 99.8
})

// 趋势分析
const trends = reactive({
  weeklyDetections: 156789,
  detectionChange: 8.3,
  weeklyThreats: 3456,
  threatChange: 12.5,
  weeklyAccuracy: 94.7,
  accuracyChange: 2.1
})

// 报告表单
const reportForm = reactive({
  type: '',
  dateRange: [],
  format: 'pdf'
})

// 报告表单验证规则
const reportRules = {
  type: [
    { required: true, message: '请选择报告类型', trigger: 'change' }
  ],
  dateRange: [
    { required: true, message: '请选择时间范围', trigger: 'change' }
  ]
}

// 定时更新器
let updateInterval = null

// 方法
const formatNumber = (number) => {
  if (number >= 1000000) {
    return (number / 1000000).toFixed(1) + 'M'
  } else if (number >= 1000) {
    return (number / 1000).toFixed(1) + 'K'
  }
  return number.toString()
}

const navigateTo = (path) => {
  router.push(path)
}

const refreshData = async () => {
  try {
    // 模拟数据刷新
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新数据
    overview.totalUsers += Math.floor(Math.random() * 100)
    overview.totalDetections += Math.floor(Math.random() * 1000)
    overview.blockedThreats += Math.floor(Math.random() * 50)
    
    ElMessage.success('数据刷新成功')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

const generateReport = () => {
  reportDialogVisible.value = true
}

const submitReport = async () => {
  if (!reportFormRef.value) return
  
  try {
    await reportFormRef.value.validate()
    reportGenerating.value = true
    
    // 模拟报告生成
    await new Promise(resolve => setTimeout(resolve, 3000))
    
    ElMessage.success('报告生成成功，已发送到您的邮箱')
    reportDialogVisible.value = false
    
    // 重置表单
    Object.assign(reportForm, {
      type: '',
      dateRange: [],
      format: 'pdf'
    })
  } catch (error) {
    ElMessage.error('报告生成失败')
  } finally {
    reportGenerating.value = false
  }
}

// 初始化实时检测统计图表
const initRealtimeChart = () => {
  if (!realtimeChart.value) return
  
  realtimeChartInstance = echarts.init(realtimeChart.value)
  
  const option = {
    title: {
      text: '24小时检测量趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['文本检测', '图像检测', '音频检测', '视频检测'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 24 }, (_, i) => `${i}:00`)
    },
    yAxis: {
      type: 'value',
      name: '检测次数'
    },
    series: [
      {
        name: '文本检测',
        type: 'line',
        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 1000 + 500)),
        smooth: true,
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '图像检测',
        type: 'line',
        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 800 + 300)),
        smooth: true,
        itemStyle: { color: '#91cc75' }
      },
      {
        name: '音频检测',
        type: 'line',
        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 400 + 200)),
        smooth: true,
        itemStyle: { color: '#fac858' }
      },
      {
        name: '视频检测',
        type: 'line',
        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 300 + 100)),
        smooth: true,
        itemStyle: { color: '#ee6666' }
      }
    ]
  }
  
  realtimeChartInstance.setOption(option)
}

// 初始化威胁类型分布图表
const initThreatChart = () => {
  if (!threatChart.value) return
  
  threatChartInstance = echarts.init(threatChart.value)
  
  const option = {
    title: {
      text: '威胁类型分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '威胁类型',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 1048, name: '谣言信息' },
          { value: 735, name: '诈骗信息' },
          { value: 580, name: 'AI生成内容' },
          { value: 484, name: '恶意链接' },
          { value: 300, name: '其他威胁' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  threatChartInstance.setOption(option)
}

// 初始化地域分布图表
const initRegionChart = () => {
  if (!regionChart.value) return
  
  regionChartInstance = echarts.init(regionChart.value)
  
  const option = {
    title: {
      text: '用户地域分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '用户分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 35, name: '华东地区' },
          { value: 28, name: '华北地区' },
          { value: 25, name: '华南地区' },
          { value: 12, name: '其他地区' }
        ]
      }
    ]
  }
  
  regionChartInstance.setOption(option)
}

// 初始化性能趋势图表
const initPerformanceChart = () => {
  if (!performanceChart.value) return
  
  performanceChartInstance = echarts.init(performanceChart.value)
  
  const option = {
    title: {
      text: '模型性能趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['准确率', '响应时间', '吞吐量'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: [
      {
        type: 'value',
        name: '准确率(%)',
        position: 'left',
        axisLabel: {
          formatter: '{value}%'
        }
      },
      {
        type: 'value',
        name: '响应时间(ms)',
        position: 'right',
        axisLabel: {
          formatter: '{value}ms'
        }
      }
    ],
    series: [
      {
        name: '准确率',
        type: 'line',
        data: [89.2, 90.1, 91.5, 92.3, 93.1, 93.8, 94.2, 94.5, 94.7, 95.1, 95.3, 95.5],
        smooth: true,
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '响应时间',
        type: 'line',
        yAxisIndex: 1,
        data: [320, 285, 270, 260, 255, 250, 245, 240, 238, 235, 230, 225],
        smooth: true,
        itemStyle: { color: '#91cc75' }
      },
      {
        name: '吞吐量',
        type: 'bar',
        data: [1200, 1350, 1450, 1580, 1620, 1750, 1850, 1920, 2000, 2100, 2200, 2300],
        itemStyle: { color: '#fac858' }
      }
    ]
  }
  
  performanceChartInstance.setOption(option)
}

// 更新图表数据
const updateChartData = () => {
  // 更新实时图表数据
  if (realtimeChartInstance) {
    const newData = {
      series: [
        {
          data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 1000 + 500))
        },
        {
          data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 800 + 300))
        },
        {
          data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 400 + 200))
        },
        {
          data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 300 + 100))
        }
      ]
    }
    realtimeChartInstance.setOption(newData)
  }
}

// 生命周期
onMounted(() => {
  // 初始化图表
  setTimeout(() => {
    initRealtimeChart()
    initThreatChart()
    initRegionChart()
    initPerformanceChart()
  }, 100)
  
  // 设置定时更新
  updateInterval = setInterval(updateChartData, 10000)
})

onUnmounted(() => {
  // 清理定时器
  if (updateInterval) {
    clearInterval(updateInterval)
  }
  
  // 销毁图表实例
  if (realtimeChartInstance) {
    realtimeChartInstance.dispose()
  }
  if (threatChartInstance) {
    threatChartInstance.dispose()
  }
  if (regionChartInstance) {
    regionChartInstance.dispose()
  }
  if (performanceChartInstance) {
    performanceChartInstance.dispose()
  }
})
</script>

<style scoped>
.data-analysis-index {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.data-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.overview-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.card-icon.users {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

.card-icon.detections {
  background: linear-gradient(45deg, #f093fb, #f5576c);
}

.card-icon.accuracy {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.card-icon.blocked {
  background: linear-gradient(45deg, #43e97b, #38f9d7);
}

.card-content {
  flex: 1;
}

.card-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.card-label {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.card-trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.trend-up {
  color: #67c23a;
  font-size: 16px;
  font-weight: bold;
}

.trend-label {
  color: #999;
  font-size: 12px;
  margin-top: 2px;
}

.analysis-modules {
  margin-bottom: 30px;
}

.analysis-modules h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.module-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.module-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  margin-bottom: 15px;
}

.module-content h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.module-content p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.module-stats {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.realtime-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.chart-container {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

.key-metrics {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.key-metrics h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metric-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.metric-title {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.metric-chart {
  margin-top: 10px;
}

.trend-analysis {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trend-analysis h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.trend-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.trend-header h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.trend-period {
  color: #999;
  font-size: 12px;
}

.trend-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.value-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.value-change {
  font-size: 14px;
  font-weight: 500;
}

.value-change.positive {
  color: #67c23a;
}

.value-change.negative {
  color: #f56c6c;
}

.trend-description {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-analysis-index {
    padding: 15px;
  }
  
  .data-overview {
    grid-template-columns: 1fr;
  }
  
  .module-grid {
    grid-template-columns: 1fr;
  }
  
  .realtime-charts {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .trend-grid {
    grid-template-columns: 1fr;
  }
}
</style> 